<!-- 开通会员 -->
<template>
	<view class="open-member">
		<view class="header">
		</view>
		<view class="content">
			<view class="user-info flex align-center">
				<image class="headerImg" :src="info.headimg"></image>
				<view class="" style="margin-left: 20rpx;">
					<view class="flex align-center">
						<view class="user-name">{{info.nickname}}</view>
						<image class="vip" v-if="!info.vip" src="https://wx.2024csnl.com/static/mine/vipOne.png"></image>
						<image class="vip" v-if="info.vip" src="https://wx.2024csnl.com/static/mine/vipTwo.png"></image>
					</view>
					<view class="dec" v-if="!info.vip">您还不是会员,开通会员尊享会员权益</view>
					<view class="dec" style="color: #fdc45b;" v-else>{{info.vipendtime}}</view>
				</view>
			</view>
			<view class="bgBigBox">
				<image class="bgIcon" src="https://wx.2024csnl.com/static/mine/vipbg.png"></image>
				<view class="contentBox">
					<view class="tit">￥<text>{{vipMsg.apply_paymoney}}</text> 年卡</view>
					<view class="hintBtn flex-center">仅{{vipMsg.avgprice}}元/天</view>
				</view>
			</view>
			<view>
				<view class="flex-center">
					<image class="hintImg" src="https://wx.2024csnl.com/static/mine/vipquanyi.png"></image>
				</view>
				<view class="hintText" v-html="vipMsg.explain">
				</view>
			</view>

			<view class="btnBox">
				<view class="checkBigBox flex-center">
					<radio-group style="font-size: 27rpx;color: #B3B3B3;margin: 20rpx;">
						<label class="select">
							<radio value="" :checked="checked" @click.stop="isChecked" color="#FDC45B" /><text @click.stop="">我已阅读并同意</text>
							<text style="color: #333333;"
								@click.stop="onSkip('/package/mine/agreement?pageType=VIP协议')">《VIP协议》</text>
						</label>
					</radio-group>
				</view>
				<view class="action-btn" @click="submit">立即开通</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getVipMsg,
		setJoinMsg
	} from "../../api/index.js"
	export default {
		data() {
			return {
				isVip: false,
				checked: false,
				vipMsg: {},
				info: {},
			};
		},
		onLoad(opt) {
			this.onGetVipMsg()
		},
		methods: {
			// 提交数据
			async submit() {
				if (!this.checked) {
					return this.showToast('请先阅读并同意VIP协议')
				}
				const res = await setJoinMsg('s=/ApiMy/levelup', {
					levelid: 7
				})
				// console.log(res, "res---")
				const {
					money,
					payorderid,
					msg,
					status
				} = res.data
				this.showToast(msg)
				if (status == 1) {
					setTimeout(() => {
						this.onSkip(
							`/business/pages/business_tab/orderPay?money=${money}&orderId=${payorderid}&pageType=vip`
						)
					}, 1500)
				}
			},
			// vip信息
			async onGetVipMsg() {
				const res = await getVipMsg(`s=/ApiZwyRequest/getvipinfo`)
				const {
					data,
					info,
					status,
					msg
				} = res.data
				// console.log(res, "商家登录")
				if (status == 1) {
					this.info = info
					this.vipMsg = data
				} else {
					this.showToast(msg)
				}
			},

			// 勾选协议
			isChecked(e) {
				this.checked = !this.checked
				// console.log(e,"eeeee")
			},
		},
	};
</script>

<style lang="scss" scoped>
	.btnBox {
		position: fixed;
		bottom: 0;
		width: 95.2vw;
		background: #fff;
		padding-bottom: 50rpx;

	}

	.hintText {
		font-size: 28rpx;
		color: #808080;
		line-height: 50rpx;
		padding-bottom: 300rpx;
	}

	.hintImg {
		height: 39rpx;
		margin: 100rpx 0 53rpx;
	}

	.bgBigBox {
		margin-top: 70rpx;
		position: relative;

		.bgIcon {
			width: 95vw;
			height: 220rpx;
		}

		.contentBox {
			position: absolute;
			top: 20rpx;
			left: 100rpx;

			.tit {
				color: #FD502D;
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 25rpx;

				text {
					font-size: 56rpx;
					margin: 0 15rpx;
				}
			}

			.hintBtn {
				font-size: 28rpx;
				background: #FF4F2E;
				color: #fff;
				border-radius: 40rpx;
				padding: 18rpx 25rpx;
			}

		}
	}

	.headerImg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.open-member {
		.header {
			height: 150rpx;
			background-color: #212121;
			box-sizing: border-box;
			overflow: hidden;
			padding: 0 20rpx;
		}

		.content {
			padding: 0 20rpx;
			box-sizing: border-box;

			.user-info {
				background: #ffffff;
				box-shadow: 0px 7rpx 40rpx 0rpx rgba(217, 216, 216, 0.3);
				border-radius: 20rpx;
				padding: 35rpx 50rpx;
				box-sizing: border-box;
				margin-top: -100rpx;

				.user-name {
					font-size: 34rpx;
					font-weight: bold;
					color: #333333;
					margin-right: 24rpx;
				}

				.vip {
					width: 70rpx;
					height: 35rpx;
					margin-left: 36rpx;
				}

				.dec {
					font-size: 30rpx;
					font-weight: 500;
					color: #b3b3b3;
					margin-top: 15rpx;
				}
			}



			.action-btn {
				height: 93rpx;
				background: linear-gradient(90deg, #fadc9e, #fdc45b);
				border-radius: 47rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #773b00;
				line-height: 93rpx;
				text-align: center;
			}

			.vip-txt-img {
				margin-bottom: 67rpx;
				width: 436rpx;
				height: 33rpx;
			}
		}

		.footer {
			padding: 0 80rpx;

			.img {
				width: 80rpx;
				height: 80rpx;
			}

			.label {
				font-size: 27rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}
</style>
